<template>
    <div class="col-lg-6">
        <div class="ibox ">
            <div class="ibox-title">
                <h5>{{title}}</h5>
                <div class="ibox-tools">
                    <!-- <a class="collapse-link">
                        <i class="fa fa-chevron-up"></i>
                    </a> -->
                    <!-- 
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a> 
                    -->
                </div>
            </div>
            <div class="ibox-content" style="height: 269px">
                <div ref="container" :id="div_id">
                    <canvas :id="canvas_id"></canvas>
                </div>
            </div>
        </div>
    </div>
    
</template>

<script>
export default {
    name: 'Chart',
    props: {
        title: [String,],
        id: [Array,],
        type: [String],
        date: [String, Number],
        labels: [Array],
        datasets: [Array, Object,],
    },
    data() {
        return {
            canvas_id: this.id[1],
            div_id: this.id[0],
            list: [1,],
        }
    },
    methods: {
        render_chart: function(id, type, labels, datasets,) {
            var chartData = {
                labels: labels,
                datasets: datasets
            };
            var chartOptions = {
                responsive: true
            };
            var ctx2 = document.getElementById(id).getContext("2d");
            // eslint-disable-next-line
            // console.log(ctx2);
            // eslint-disable-next-line
            this.chartObj = new Chart(ctx2, {type: type, data: chartData, options: chartOptions});
        },
        clear_canvas: function() {
            if(document.getElementById(this.canvas_id)){
                document.getElementById(this.canvas_id).remove();
            }
            var cdom = document.createElement("canvas");
            cdom.setAttribute("id",this.canvas_id);
            cdom.setAttribute("height","140");
            document.getElementById(this.div_id).appendChild(cdom);
            // if (this.list) {
            //     this.list.splice(0, 1);
            //     this.list.push(1);
            // } else {
            //     this.list.push(1);
            // }
            // eslint-disable-next-line
        }
    },
    watch: {
        date: function() {
            // eslint-disable-next-line
            // console.log('chart change');
            this.$nextTick(function() {
                this.clear_canvas();
                this.render_chart(this.id[1], this.type, this.labels, this.datasets);
            })          
        },
        // data: {
        //     handler: function() {
        //         console.log(this.data);
        //         this.clear_canvas();
        //         this.render_chart(this.id, this.type, this.date, this.datasets);
        //     },
        //     deep: true      
        // }
    }
}
</script>

